import React, { useState, useMemo } from 'react';
import { Form, Button, Row, Col } from 'antd';
import { Icon } from '@iconify/react';
import { motion, AnimatePresence } from 'framer-motion';
import HamburgerIcon from './components/checkboxes';
import styles from './index.module.css';

export interface SearchFormItem {
  name: string;
  label?: string;
  component: React.ReactNode;
  col?: number;
}

interface SearchFormProps {
  items: SearchFormItem[];
  onSearch: (values: any) => void;
  onReset: () => void;
  loading?: boolean;
  defaultExpanded?: boolean; // 默认是否展开
}

const SearchForm: React.FC<SearchFormProps> = ({ 
  items, 
  onSearch, 
  onReset, 
  loading,
  defaultExpanded = false 
}) => {
  const [form] = Form.useForm();
  const [collapsed, setCollapsed] = useState(!defaultExpanded);
  const [activeCount, setActiveCount] = useState(0);

  const handleFinish = (values: any) => {
    onSearch(values);
  };

  const handleReset = () => {
    form.resetFields();
    setActiveCount(0);
    onReset();
  };

  const toggleCollapsed = () => {
    setCollapsed(!collapsed);
  };

  // 监听表单值变化
  const handleValuesChange = () => {
    const values = form.getFieldsValue();
    const count = Object.keys(values).filter(key => {
      const value = values[key];
      if (Array.isArray(value)) return value.length > 0;
      return value !== undefined && value !== null && value !== '';
    }).length;
    setActiveCount(count);
  };

  return (
    <div className={styles.searchFormContainer}>
      {/* 表单内容区域 */}
      <AnimatePresence initial={false}>
        {!collapsed && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: 'auto', opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.3, ease: 'easeInOut' }}
            style={{ overflow: 'hidden' }}
          >
            <div className={styles.searchFormBody}>
              <Form 
                form={form} 
                onFinish={handleFinish} 
                onValuesChange={handleValuesChange}
                layout="vertical"
              >
                <Row gutter={16}>
                  {items.map((item) => (
                    <Col key={item.name} span={item.col || 6}>
                      <Form.Item name={item.name} label={item.label}>
                        {item.component}
                      </Form.Item>
                    </Col>
                  ))}
                </Row>
              </Form>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* 底部操作栏 */}
      <div className={styles.searchFormFooter}>
        <div className={styles.footerLeft}>
          <HamburgerIcon checked={!collapsed} onClick={toggleCollapsed} size="10px" />
          {collapsed && activeCount > 0 && (
            <span className={styles.activeCount}>({activeCount})</span>
          )}
        </div>

        <div className={styles.footerRight}>
          <Button 
            type="primary" 
            size="small"
            icon={<Icon icon="solar:magnifer-linear" />}
            onClick={() => form.submit()}
            loading={loading}
          >
            搜索
          </Button>
          <Button 
            size="small"
            icon={<Icon icon="solar:refresh-linear" />}
            onClick={handleReset}
          >
            重置
          </Button>
        </div>
      </div>
    </div>
  );
};

export default SearchForm;
